<template>
  <div class="job">
      <div class="nav-bar">
          <div class="icon-left" @click="clickGoBackHandle"><van-icon  class="icon" name="arrow-left" />工作</div>
          <div class="nav-title">岗位调动</div>
      </div>
      <div class="job-event" @click="jobJumpHandle('/changeshifts')">申请换班<van-icon  class="icon" name="arrow"/></div>
      <div class="job-event job-event-two"  @click="jobJumpHandle('/applytransfer')">申请调岗<van-icon  class="icon" name="arrow"/></div>
      <div class="job-event" @click="jobJumpHandle('/jobapplication')">职务申请<van-icon  class="icon" name="arrow"/></div>
      <div class="job-event" @click="jobJumpHandle('/quit')">离职<van-icon  class="icon" name="arrow"/></div>
  </div>
</template>

<script>
export default {
name:'JobTransfer',
methods:{
    clickGoBackHandle(){
        this.$router.back()
    },
    jobJumpHandle(url){
        this.$router.push(url)
    }
}
}
</script>

<style scoped lang="less">
.job{
    .nav-bar{
        height: 1.3rem;
        line-height:1.3rem;
        background-color: #4e90ff;
        color:#fff;
        position: relative;
        .icon-left{
            float:left;
            margin-left:0.5rem;   
            .icon{
                position:absolute;
                top:0.48rem;
                left:0.13rem;
            }
        }
        .nav-title{
            float:left;
            margin-left: 2.2rem;
        }
    }
    .job-event{
        margin-top:20px;
        height:0.9rem;
        line-height:0.9rem;
        font-weight: 600;
        background-color: #fff;
        padding-left:0.2rem;
        box-shadow: 0 0 1px;
        .icon{
            display:block;
            float:right;
            margin-right:0.2rem;
            margin-top:0.25rem;
        }
    }
    .job-event-two{
        margin-top:0;
    }
}
</style>